<template>
  <common-page class="view-board-preview" :title="`看板预览—${vbName}`">
    <el-button slot="header" type="primary" @click="exportPDF" :loading="isExportLoading">导出</el-button>
    <el-button slot="header" @click="$emit('close')">返回</el-button>
    <div class="view-board-preview-container" slot="content">
      <div class="preview-container">
        <Preview
          :configData="configData"
          :id="id"
          ref="container"
          isPreview
        ></Preview>
      </div>
    </div>
  </common-page>
</template>

<script>
import {
  getInfo
} from '@/api/screenConfig/viewboard'
import Preview from './components/preview'
import ViewBoardIndex from './mixin/ViewBoardIndex'

export default {
  name: 'preview',
  // mixins: [ViewBoardIndex],
  components: {
    Preview
  },
  data() {
    return {
      vbName: '',
      configData: null,
      id: '',
      isExportLoading: false,
    }
  },
  methods: {
    /**
     * 数据初始化
     * @param info
     */
    initData(info) {
      this.vbName = info.name
      this.id = info.id
      getInfo({ id: info.id }).then(res => {
        if (res && res.code === 200) {
          try {
            this.configData = JSON.parse(res.data.chartConfig)
          } catch (e) {
            console.err('转换异常: ', e)
            this.configData = null
          }
        } else {
          this.$GlobalErrorConfirm('获取数据失败', res.msg, '重新加载').then(() => {
            this.initData(info)
          })
        }
      })
    },
    exportPDF() {
      this.isExportLoading = true
      this.$refs.container.exportPDF(this.vbName).finally(()=>{
        this.isExportLoading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.view-board-preview-container {
  width: 100%;
  height: 100%;
  padding-top: 12px;
  box-sizing: border-box;
  background: #eee;

  .preview-container {
    height: 100%;
    overflow-y: scroll;
  }
}
</style>
